<script>
  import List from '../components/list.svelte';
  import Btn from '../components/btn.svelte';
  import Paging from '../components/paging.svelte';
  import {onMount} from 'svelte';
  import {Post} from '../lib/net.js';
  import {WithdrawState} from '../conf.js';
  import {WithdrawRefuse, WithdrawConfirm, WithdrawList, AgentList,SearchAgent} from '../api.js';
  import Query from '../model/query.js';
  import moment from 'moment';
  import QueryBar from '../components/queryBar.svelte';
  import { OtcState,MoneyType} from '../conf.js';

  let btnText = `<i>+</i>添加代理`
  let btnHref = "/agent/add"

  let data = {title: ["UID", "姓名", "手机号","邮箱", "代理人","身份证", "订单编号","数量","账户余额",  "申请时间", "状态"], data: []}

  let total = 0;

  var query = new Query();
  var wahaha = '';
  onMount(() => {
    doneList();
  });

  async function getList(e) {
    if (e) {
      query.start = e.detail.start
      query.end = e.detail.end
      if (e.detail.types !== 1) {
                let ret = await Post(SearchAgent, {
                    type: e.detail.types,
                    condition: query.condition,
                });
                query.condition = "";
                query.admin = ret
                if(query.admin == -100) return
      } else {
        query.admin = null
      }
    }
    query.size = 7
    query.type = 1
    let ret = await Post(WithdrawList, query)

		console.log('ret')
    console.log(ret)

    query.total = ret.total;
    query.page = ret.page;
    query.size = ret.size;
	wahaha = ret.Extra.withdraw_total;
    let _data = [];
    if (query.state >= 1) {
      data.title = ["UID", "姓名", "手机号","邮箱", "代理人","身份证", "订单编号","数量","申请时间", "状态"];
    }
    for (let item of ret.list) {
      let arr = [
        item.uid, item.name, item.phone,item.email, item.agent,item.card_id, item.tid,
        Number(item.amount).toFixed(2),item.show_operate_date,'已到账'
      ]
      // query.state == 1 ? OtcState[item.state] : `<span class="button is-small">确认</span>`
      arr.id = item.tid;
      arr.handler = access;
      _data.push(arr);
    }
    data.data = _data;
  }

  async function access() {

    let btn = this.querySelector("button");

    let tid = btn.getAttribute("data-id");
    let btnType = btn.getAttribute("type");

    if (btnType == "access") {
      await Post(WithdrawConfirm, {tid});
    } else {
      await Post(WithdrawRefuse, {tid})
    }

    getList();
  }

  function setPage(page) {
    query.page = page;
    getList();
  }

  function prepareList(e) {
    query.state = 0;
    getList();
  }

  function accessList(e) {
    query.state = 1;
    getList();
  }

  function doneList(e) {
    query.state = 2;
    getList();
  }
</script>

<div class="view">
	<div class="borderRadius4 container" style="margin:0">
			<div class="columns rowReverse" style="padding: 20px;">
					<div class="column is-4">
							<div class="rowNumCenter">
									<span class="left1">用户数量：</span>
									<span class="mid1" style="color:forestgreen">{query.total}</span>
									<span class="left1">人</span>
							</div>
							<div class="rowNumCenter">
									<span class="left1">资金总计：</span>
									<span class="mid1" style="color:forestgreen">{wahaha}</span>
									<span class="left1">USDT</span>
							</div>
					</div>
			</div>
	</div>
		<div style="display: flex;flex-direction: row;align-items: center;width: 99%;margin: 5px;height: 60px;background-color: white;margin-top: 5px"
				 class="borderRadius4">
        <span style="color: #20222A;margin: 20px">
            充币记录
        </span>
		</div>
		<div class="borderRadius4 container rowCenter " style="margin-top: 0px">
				<QueryBar query={query} on:message={getList}/>
		</div>
		<div class="container" style="margin-top: -10px">
				<List data={data}/>
		</div>
		<div class="container rowReverse">
				{#if query.total !== 0}
				<Paging page={query} handler={setPage}/>
						{/if}
		</div>
</div>

<style>
		.rowNumCenter{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			font-size: 12px;
		}
		.containerHold {
			margin: 20px 1%;
			width: 50px;
			position: absolute;
			top: 20%;
		}
		.borderRadius4 {
				border-radius: 4px;
		}

		.container {
				margin: 20px 5px;
		}

		.info {
				background: #fff;
		}

		.btn {
				line-height: 5px;
				top: 50%;
				transform: translateY(10%);
		}

		.view {
				overflow-y: scroll;
		}
</style>
